<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>前台学生登录页面</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <meta name="keywords" content="后台管理系统">
    <meta name="description" content="后台管理系统">
    <meta name="author" content="soulCoder">

    <link rel="stylesheet" type="text/css" th:href="@{/static/other/css/style.css}" >




    <style>
        .tm_login_body{
            background:url('../../static/other/images/001.jpg');
            background-size:cover;
            -moz-background-size:cover;
            background-repeat:no-repeat;
        }
        .tm_login_container{ width:500px; margin:200px auto; clear:both}
        .tm_login_title{
            height:80px;
            margin:10px 0 15px 0;
            background:#fff;
            text-align:center;
            border-bottom:solid 1px #eee;
        }
        .tm_login_title img{
            height:50px;
        }
        .tm_login_title span{
            font-size:22px;
            line-height:80px;
            font-family:'Microsoft Yahei',Tahoma, Geneva, 'Simsun';
        }
        .tm_login_form{
            width:100%;
            height:320px;
            clear:both;
            -moz-border-radius:8px;
            -webkit-border-radius:8px;
            border-radius:8px;
            padding:1px;
            background:#fff;
        }
        .tm_login_table{ width:400px; margin:20px auto;}
        .tm_login_table tr th{ width:100px;}
        .tm_login_table tr td{ width:300px; text-align:left}

        .tm_login_title_table{ width:400px; margin:0px auto;}
        .tm_login_title_table tr th{ width:100px;}
        .tm_login_title_table tr td{ width:300px; text-align:left}

        .tm_login_foot{ width:100%; line-height:20px; text-align:center; clear:both; margin:20px 0}


        html { overflow: hidden; }
        body { overflow: hidden; }

        .layui-layer-btn{text-align:center !important;}
    </style>
    <link rel="stylesheet"  th:href="@{/static/other/css/layer.css}" id="layui_layer_skinlayercss"></head>

<body class="tm_login_body">

<div class="tm_login_container">
    <div class="tm_login_form">
        <div class="tm_login_title">
            <table border="0" cellpadding="0" cellspacing="0" class="tm_login_title_table">
                <tbody>
                <tr>
                    <th><img th:src="@{/static/other/images/logo_min.png}" align="absmiddle"></th>
                    <td><span>Exam考试系统</span></td>
                </tr>
                </tbody></table>
        </div>
        <table border="0" cellpadding="5" cellspacing="0" class="tm_login_table">
            <tbody><tr>
                <th style="font-size: 20px">用户名</th>
                <td><input type="text" class="tm_txt" name="username" maxlength="20" value="" style="width:255px"></td>
            </tr>
            <tr>
                <th style="font-size: 20px"> 密 &nbsp; 码</th>
                <td><input type="password" class="tm_txt" name="userpass" maxlength="20" value="" style="width:255px"></td>
            </tr>
            <tr>
                <th style="font-size: 20px">验证码</th>
                <td>
                    <input type="text" class="tm_txt" name="usercode" maxlength="20" value="" style="width:105px">
                    <img th:src="@{/Front/getCode}" align="absmiddle" height="30px" id="img_verifycode" th:onclick="reloadImgcode()" style="cursor:pointer">

                </td>
            </tr>

            <tr>
                <th></th>
                <td>
                    <div style="margin-top:10px">
                        <button type="button" class="tm_btn tm_btn_primary" style="width:50%" onclick="tm.doLogin();">登录</button>
                        <button type="button" class="tm_btn" onclick="tm.goRegister();" style="width:40%">注册</button>
                    </div>
                </td>
            </tr>
            <tr>
                <th></th>
                <td></td>
            </tr>
            </tbody></table>
    </div>

    <div class="tm_login_foot">
        <div>Copyright © 考试系统前台登录界面</div>
    </div>
</div>

<script  th:src="@{/static/other/js/jquery.js}" type="text/javascript"></script>
<script th:src="@{/static/other/js/baseutil.js}"  type="text/javascript"></script>
<script th:src="@{/static/other/js/aes.js}"  type="text/javascript"></script>
<script th:src="@{/static/other/js/pad-zeropadding-min.js}"  type="text/javascript"></script>
<script th:src="@{/static/other/js/layer.js}"  type="text/javascript"></script>

<script type="text/javascript" th:inline="javascript">
    var ctxPath = [[${#httpServletRequest.getContextPath()}]];
    $(document).ready(function(){
        $("input[name='usercode']").keydown(function(e){
            var curKey = e.which;
            if(curKey == 13){
                tm.doLogin();
            }
        });
        checkBrowser();
    });

    function reloadImgcode(){
        $("#img_verifycode").attr("src", ctxPath + "/Front/getCode?t=" + Math.random());
    }

    function getBrowserInfo(){
        try{
            var Sys = {};
            var ua = navigator.userAgent.toLowerCase();
            console.log(ua);
            var re =/(msie|trident|firefox|chrome|opera|version).*?([\d.]+)/;
            var m = ua.match(re);
            Sys.browser = m[1].replace(/version/, "'safari");
            Sys.ver = m[2];
            return Sys;
        }catch(e){}
    }

    function checkBrowser(){
        var tmBrowser = getBrowserInfo();
        var isSupportedBrowser = false;
        if(tmBrowser){
            if(tmBrowser.browser == "firefox" || tmBrowser.browser == "chrome"){
                isSupportedBrowser = true;
            }
        }
        if(!isSupportedBrowser){
            layer.open({
                title:"浏览器提示",
                content:"为达到最佳使用效果，请使用Chrome、FireFox、或360极速浏览器访问系统。",
                btnAlign: "c"
            });
        }
    }


    var tm = {

        doReset : function(){
            $("input[name='username']").val('');
            $("input[name='userpass']").val('');
            $("input[name='usercode']").val('');
        },
        goRegister : function(){
            window.location= ctxPath + "/Front/gotoRegPage";
        },
        doencrypt : function(data){

            var key = CryptoJS.enc.Latin1.parse('71ntk1yinm5nth35');
            var iv = CryptoJS.enc.Latin1.parse('v0zp7ghw96edujzh');
            return CryptoJS.AES.encrypt(data, key, {iv:iv,mode:CryptoJS.mode.CBC,padding:CryptoJS.pad.ZeroPadding}).toString();



        },
        doLogin : function(){
            var username = $("input[name='username']").val();
            var password = $("input[name='userpass']").val();
            var usercode = $("input[name='usercode']").val();
            if(baseutil.isEmpty(username)){
                alert('没有填写用户名');
                return;
            }
            if(baseutil.isEmpty(password)){
                alert('没有填写登录密码');
                return;
            }
            if(baseutil.isEmpty(usercode)){
                alert('没有填写验证码');
                return;
            }
            $(".tm_btn_primary").text('登录...');

            $.ajax({
                type: "POST",
                url: ctxPath + "/StuUser/login",
                dataType: "json",
                data: {"username":username, "password":password, "usercode":usercode, "t":Math.random()},
                success: function( resp ){
                    console.log( resp );
                    if( resp ){
                        let ret = resp.result;
                        var cause = resp["cause"];
                        if( ret=='success' ){
                            location.href = ctxPath + "/Front/index";
                        }else{
                            alert( cause );
                            window.location.reload();
                        }
                    }
                },
                error: function(){
                    //$(".tm_btn_primary").text('登录');
                    alert('系统忙，请稍后再试');
                    window.location.reload();
                }
            });
        }
    };
</script>
</body>
</html>